<!--
 * @Author: HeAo
 * @Date: 2022-01-04 14:58:04
 * @LastEditTime: 2022-01-05 15:38:27
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \am-app\src\views\manager\OrderDetails.vue
 * 别乱动！
-->
<template>
  <div>
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content">
      <van-cell-group :data="order" inset>
        <van-cell title="工单类型"  size="large" icon="qr"  >{{order.type}}</van-cell>
        <van-cell title="工单状态" size="large" icon="orders-o" >{{order.status}}</van-cell>
        <van-cell title="项目名称" size="large" icon="coupon-o" >{{engineerName}}</van-cell>
        <van-cell title="设备名称" size="large" icon="desktop-o" >{{deviceName}}</van-cell>
        <van-cell title="申报原因" size="large" icon="warning-o" >
          <span v-if="order.bill_why == null">未注明原因</span>
          <span v-else>{{order.bill_why}}</span></van-cell>
         <van-cell title="申报图片" is-link arrow-direction="down"  size="large" icon="photo-o" ><span v-show="order.p1 == null && order.p2 == null && order.p3 == null">报修者暂未上传图片</span></van-cell>
        <van-image v-show="order.p1"
            width="100px"
            height="100px"
            fit="scale-down"
            :src="order.p1"
        />
        <van-image v-show="order.p2"
            width="100px"
            height="100px"
            fit="scale-down"
            :src="order.p2"
        />
        <van-image v-show="order.p3"
            width="100px"
            height="100px"
            fit="scale-down"
            :src="order.p3"
        />
        <span v-show="order.status == '待接单'"></span>
        <van-cell v-show="order.status == '进行中'" title="处理现场" size="large" icon="photograph" >
        </van-cell>
        <van-cell  >
           <van-uploader v-show="order.status == '进行中'"
        multiple
        :fileList="imgList"
        :max-count="3"
        result-type="file"
        :after-read="afterRead"
      />
        </van-cell>
        <van-cell v-if="order.status == '已完成'" title="处理现场" size="large" icon="passed" >
          <span v-show="order.status == '已完成' && order.photo1 == null &&order.photo2 == null &&order.photo3 == null">工人未上传处理现场图片</span></van-cell>
          <van-image v-show="order.status == '已完成' && order.photo1"
            width="100px"
            height="100px"
            fit="scale-down"
            :src="order.photo1"
        />
        <van-image v-show="order.status == '已完成' && order.photo2"
            width="100px"
            height="100px"
            fit="scale-down"
            :src="order.photo2"
        />
        <van-image v-show="order.status == '已完成' && order.photo3"
            width="100px"
            height="100px"
            fit="scale-down"
            :src="order.photo3"
        />
        
      </van-cell-group>
      
      <div class="btn" style="margin-top: 20px">
        <van-button v-if="order.status == '待接单'" type="info" @click="toConfirmHandler" style="width: 100%"
          >确认接单</van-button
        >
        <van-button v-else-if="order.status == '进行中'" type="info" @click="toConfirmCompletion" style="width: 100%"
          >确认完成</van-button
        >
        <span v-else type="info" @click="toConfirmCompletion" style="width: 100%"
          ></span>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
import { mapState } from "vuex";
import { Dialog, Notify,Toast } from "vant";
import axios from 'axios';
export default {
  data() {
    return {
      order: {},
      order_id: null,
      EngineerTable:[],
      engineerName:{},
      deviceName:{},
      fileList: [],
      imgList: [],
      photoaddress:[],
      form:{},
    };
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  methods: {
    //查询工程信息
    findEngineer() {
      get("/workorder/pageQuery", {
        page: 1,
        pageSize: 100,
        engineer_id: this.order.engineer_id,
      }).then((res) => {
        this.engineerName = res.data.list[0].engineer_name;
      });
      get("/workorder/pageQuery", {
        page: 1,
        pageSize: 100,
        device_id: this.order.device_id,
      }).then((res) => {
        this.deviceName = res.data.list[0].device_name;
      });
    },
    // 根据id查询工单详情
    findWorkerOrderById(id) {
      get("/workorder/findById", { id }).then((res) => {
        this.order = res.data.order[0];
      });
    },
    // 确认接单按钮
    toConfirmHandler() {
      Dialog.confirm({
        title: "提示",
        message: "是否确认接单",
      }).then(() => {
        get("/workorder/takeOrder", {
          id: this.order_id,
          account_id: this.info.id,
        }).then((res) => {
          // 提示成功
          Notify({ type: "success", message: "接单成功" });
          // 跳转至我的工单
          this.$router.push({
            path: "/manager/order",
          });
        });
      });
    },
        // 上传图片
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios
        .post(url, params, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          file.status = "success";
          let url = "http://121.199.29.84:8888/group1/" + response.data.data.id;
          this.imgList.push(url);
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          Toast("图片上传失败:" + error + " 请返回重新上传");
        });
    },
    //确认完成按钮
    toConfirmCompletion(){
      Dialog.confirm({
        title: "提示",
        message: "确认完成？",
      }).then(() => {
        if(this.imgList.length == 3){
          let params = {
            id:this.order_id,
            photo1:this.imgList[0],
            photo2:this.imgList[1],
            photo3:this.imgList[2],
            finish_time: new Date().getTime(),
          }
          get("/workorder/finishOrder", params).then((res) => {
            // 提示成功
            Notify({ type: "success", message: "已完成" });
            // 跳转至我的工单
            this.$router.push({
              path: "/manager/order",
            });
          });
        }else{
          Notify({ type: 'warning', message: '请上传三张图片' });
        }
        
      });
    },
  },
  created() {
    this.order_id = this.$route.query.id;
    // 执行根据id查询工单数据的方法
    this.findWorkerOrderById(this.order_id);
    this.findEngineer();
  },
};
</script>
<style scoped>
.content {
  padding-top: 25px;
}
.btn{
  padding: 20px;
}
.van-image{
  padding-top: 10px;
  padding-right: 12px;
}
.photonotice{
  padding-bottom: 10px;
}
</style>
